<template>
  <transition name="anim-discover">
    <div class="d-base section--wrap J-wrap">
      <div class="discover-bg J-wrap" :style="{backgroundImage: 'url(' + image + ')'}"></div>
      <transition name="anim-discover-tip">
        <div class="tip--wrap" v-if="transObject.hideTip">
          <div class="tip--wrap__inner">
            <div class="tip">
              <h2 class="tip--title">{{ config.city }}</h2>
              <p class="tip--desc" v-for="item in config.desc">{{ item }}</p>
            </div>
          </div>
        </div>
      </transition>
      <transition name="anim-discover-photos">
        <div class="photos--wrap" v-if="transObject.showPhotos">
          <div class="x-photos">
            <ul class="photos-items">
              <li class="photos-item" v-for="(item, index) in config.photos"
                @mouseover="onMouseOver(item, index)"
                @mouseleave="onMouseLeave(item, index)">
                <img :src="item.image" alt="Photo">
                <div class="photo-location" v-if="item.location">
                    <em v-if="item.location.lv1">{{ item.location.lv1 }}</em>
                    <span v-if="item.location.lv2">{{ item.location.lv2 }}</span>
                </div>
                <transition name="fade">
                  <div class="photo-more" v-if="item.active" :style="getMoreStyle(item)">
                    <p class="photo-more__desc">{{ item.desc.value }}</p>
                    <router-link class="photo-more__look" :to="item.to">
                      <span>Look</span>
                      <i class="photo-more__pointer"></i>
                    </router-link>
                  </div>
                </transition>
              </li>
            </ul>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
  import $ from 'jquery'
  import XPhotos from '@/components/XPhotos'

  export default {
    components: {
      XPhotos,
    },
    props: {
      config: {
        type: Object,
      },
      image: {
        type: String,
        default: ''
      }
    },
    mounted() {
      setTimeout(() => {
        this.transObject.hideTip = true
      }, 0)

      $('.J-wrap').on('mouseover.photos', e => {
        if(!this.transObject.showPhotos) {
          this.transObject.showPhotos = true
          this.transObject.hideTip = false
        }
      })
      $('.J-wrap').on('mouseleave.photos', e => {
        this.transObject.showPhotos = false
        this.transObject.hideTip = true
      })
    },
    destroyed() {
      $('.J-wrap').off('mouseenter.photos')
      $('.J-wrap').off('mouseleave.photos')
    },
    data() {
      return {
        transObject: {
          hideTip: false,
          showPhotos: false
        }
      }
    },
    methods: {
      getMoreStyle({ desc }) {
        const { top, left } = desc;

        return {
          top,
          left
        }
      },
      onMouseOver(item, index) {
        this.config.photos = this.config.photos.map((d, i) => {
          if(i === +index) {
            d.active = true
          } else {
            d.active = false
          }

          return d
        });
      },
      onMouseLeave(item, index) {
        this.config.photos = this.config.photos.map((d, i) => {
          if(i === +index) {
            d.active = false
          }
          return d
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.discover-bg {
  width: 100%;
  height: 100%;
  background-position: 0 69px;
  background-repeat: no-repeat;
  background-size: cover;
}
.section--wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}
</style>
